<template>
  <div>
    <a-table
      sticky
      :row-selection="{
        selectedRowKeys: keys,
        onChange: (k: any[]) => (keys = k),
      }"
      :columns="computedComponent"
      v-bind="$attrs"
    >
      <slot v-for="item in columns" :name="item.dataIndex"></slot>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import type { IQuery } from '@/api/config/types';
import { formatColumns } from '@/utils/common/common';
import type { TableColumnType } from 'ant-design-vue';
import type {
  FilterValue,
  SorterResult,
  TablePaginationConfig,
} from 'ant-design-vue/es/table/interface';

const props = defineProps<{
  columns: TableColumnType[];
  rowKey: string;
  query: IQuery;
}>();

const keys = defineModel<(string | number)[]>('keys');

const computedComponent = computed(() => {
  return formatColumns(props.columns);
});

/* 分页事件触发 */
const pageChange = (
  pagination: TablePaginationConfig,
  filters: Record<string, FilterValue>,
  sorter: SorterResult<any> | SorterResult<any>[],
) => {
  if (pagination.current && pagination.pageSize) {
    props.query.pageNum = pagination.current;
    props.query.query.pageSize = pagination.pageSize;
  }
  if (!(sorter instanceof Array)) {
    props.query.isAsc = sorter.order === 'ascend' ? 'asc' : 'desc';
  }
};
</script>

<style lang="scss" scoped></style>
